// 库引入
import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import classNames from 'classnames';
import {computed} from 'mobx';
import fp from 'lodash/fp';

// 组件引入
import {LayoutDefault} from '../../layouts/LayoutDefault';
import {ResourcesNavBar} from './components/ResourcesNavBar';
import {InjectDetailsList} from './components/DetailsList';

// utils引入
import {fPromise} from '../../utils/f2f';

// 样式引入
import styles from './style.module.less';

@observer
class PageLibraryDetails extends Component {
  @computed get libName() {
    return this.props.match.params.id;
  }

  componentDidMount() {
    this
      .props
      .getLibDetialsByName({name: this.libName});
  }

  render() {
    const content = (
      <Fragment>
        <ResourcesNavBar data={this.props.resourcesNavBar}/>
        <div className="container clearfix">
          <InjectDetailsList/>
        </div>
      </Fragment>
    );

    return (
      <div
        className={classNames(styles.pageLibraryDetails, 'page', this.props.className)}>
        <LayoutDefault
          className={styles.pageLibraryDetails_layout}
          captionTitle={this.props.title}
          captionSubTitle={this.props.subTitle}
          content={content}/>
      </div>
    );
  }
}

PageLibraryDetails.defaultProps = {
  title: '',
  subTitle: '',
  resourcesNavBar: [],
  getLibDetialsByName: fPromise
};

const InjectPageLibraryDetails = inject(({
  libsStore = {}
}) => ({
  title: libsStore.libDetails.data.name,
  subTitle: libsStore.libDetails.data.description,
  resourcesNavBar: [
    {
      id: '1',
      to: '',
      iconType: 'book',
      value: '中文文档'
    }, {
      id: '2',
      to: fp.get('libDetails.data.homepage',libsStore) || '/',
      iconType: 'home',
      value: '官网'
    }, {
      id: '3',
      to: fp.get('libDetails.data.repository.url',libsStore) || '/',
      iconType: 'github',
      value: '源码'
    }, {
      id: '4',
      to: '',
      iconType: 'github',
      value: 'README'
    }
  ],
  getLibDetialsByName: libsStore.libDetails.fetchData
}))(PageLibraryDetails);

export {PageLibraryDetails, InjectPageLibraryDetails};